<template>
  <van-action-sheet
    v-model="showSheet"
    :actions="options"
    @select="onSelect"
    @cancel="onCancel"
    @close="onClose"
    :description="description"
    :cancel-text="cancelText"
    safe-area-inset-bottom 
  />
</template>

<script>
export default {
  name: "action",
  props: {
    // 选项
    options: {
      type: Array,
      default: () => [],
    },
    // 是否显示取消
    cancelText: {
      type: String,
      default: "",
    },
    // 描述信息
    description: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      showSheet: true,
    };
  },
  watch: {
    showSheet(value) {
      if (!value) {
        this.$emit("close", true);
      }
    },
  },
  methods: {
    onSelect(select) {
      this.$emit("select", select);
    },
    onCancel() {
      this.$emit("cancel", true);
    },
    onClose() {
      this.$emit("close", true);
    },
  },
};
</script>

<style lang="less" scoped>
.action-wraper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}
.lineClass {
  font-size: 16px;
  color: #323233;
  text-align: center;
  line-height: 24px;
  font-weight: 400;
  position: relative;
}
.lineClass::after {
  content: "";
  position: absolute;
  bottom: 0;
  background: #ebedf0;
  width: calc(100% - 40px);
  left: 20px;
  right: 20px;
  height: 1px;
  opacity: 0.5;
}
//为了写附件弹窗 改了全局样式 之后标题都统一样式
/deep/ .van-action-sheet__description {
  height: 47.75px !important;
  line-height: 47.75px !important;
  font-size: 14px;
  color: #969799;
  text-align: center;
  line-height: 22px;
  font-weight: 400;
  padding: 0;
}
</style>
